<script setup>
    import MyTable from './component/MyTable.vue';
    import { ref } from 'vue'
    const tableData1 = ref([
      { id: 11, name: '狗蛋', age: 18 },
      { id: 22, name: '⼤锤', age: 19 },
      { id: 33, name: '铁棍', age: 17 }
    ])
    const tableData2 = ref([
      { id: 21, name: 'Jack', age: 18 },
      { id: 32, name: 'Rose', age: 19 },
      { id: 43, name: 'Henry', age: 17 }
    ])

    const onDel = (i) => {
      if(window.confirm("确定删除该数据吗？")) {
        tableData1.value.splice(i, 1)
      }
    }

</script>

<template>
  <!-- 样式1 -->
  <MyTable :tableData="tableData1" @ccc="onDel">
    <template #thead>
      <th>序号</th>
      <th>姓名</th>
      <th>年纪</th>
      <th>操作</th>
    </template>
    <template #tbody="obj">
      <tr v-for="item, index in obj.tableData" :key="item.id">
        <td>{{ index + 1 }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>
          <button @click="obj.e('ccc', index)">删除</button>
        </td>
      </tr>
    </template>
  </MyTable>
  <!-- 样式2 -->
  <MyTable :tableData="tableData2">
    <template #thead>
      <th>序号</th>
      <th>姓名</th>
      <th>年纪</th>
      <th>操作</th>
    </template>
    <template #tbody="obj">
      <tr v-for="item, index in obj.tableData" :key="item.id">
        <td>{{ index + 1 }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>
          <button @click="onCheck(index)">查看</button>
        </td>
      </tr>
    </template>
  </MyTable>
</template>

<style>

</style>